import React, { memo, useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom'
import { RightOutlined, MinusOutlined } from '@ant-design/icons'


// 导入接口
import { getPaihangbang } from '../../../../../api/paihangbangApi'
import { PaihangbangBox } from './style'

// 导入获取歌曲详情
// import { getSongDetailAction } from '../../../../player/store/actions'
// import { useDispatch } from 'react-redux'
export default memo(function Paihangbang(props) {
  // state
  const [list, setList] = useState([])
  //redux hooks
  // const dispatch = useDispatch()
  // other hooks
  useEffect(() => {
    Promise.all([getPaihangbang(), getPaihangbang(19723756), getPaihangbang(3779629), getPaihangbang(2884035), getPaihangbang(3778678)]).then(res => {
      // console.log(res);
      const result = []
      res.forEach((item, index) => {
        result.push({})
        result[index].name = item.playlist.name
        result[index].tracks = item.playlist.tracks.slice(0, 4)
      })
      setList(result)
    })
  }, [])

  // other hdanle
  // 点击歌曲跳转到  播放页面
  // const toPlayer = (id) => {
  //   dispatch(getSongDetailAction(id))
  //   console.log('执行', id);
  //   // props.history.push("/player")

  //   console.log('执行正确');
  // }
  return (
    <PaihangbangBox>
      <div className="wrap">
        <div className="title">
          <h2>排行榜</h2>
          <NavLink to="/" className="jiaobiao">
            更多<RightOutlined />
          </NavLink>
        </div>
        <div className="main" >
          {
            list.map((item, index) => {
              return (
                <div className="main_item" key={index}>
                  <div className="main_item_dianfengbang">巅峰榜</div>
                  <h3>{item.name}</h3>
                  <div className="main_item_hengxian"><MinusOutlined /></div>
                  <div className={"main_item_bg " + `main_item_${index + 1}`}></div>
                  <ul>
                    {
                      item.tracks.map((itemm, indexx) => {
                        return (
                          <li key={indexx} >
                            <NavLink to={`/player/${itemm.id}`} target="_blank">
                              <span>{indexx + 1}</span>
                              <div>
                                <span>{itemm.name}</span>
                                <span>{itemm.ar[0].name}</span>
                              </div>
                            </NavLink>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div>
              )
            })
          }
        </div>



      </div>


    </PaihangbangBox>
  )
})
